// 项目亮点 => 像nuxt一样可以自动进行配置
// 项目难点 => 扁平路由转换成树形
//require.context('路径'，'是否递归引入'，'正则') 一次导入多个模块

// 动态路由,创建路由配置
// {path:"",component:""}

//静态编译，不接受封装(引入进来所有的模块/文件)
let files = require.context("@/pages", true, /\.vue$/);

// console.log(files);
// 通过keys方法将paths转换成数组
// console.log(files.keys());

let repeatRoutes = files.keys().map((path) => {
  // 通过正则去掉index.vue或者去掉.vue的后缀
  let regExp = /(\/index\.vue|\.vue)$/;

  // 获取路径对应的每个.vue组件
  let currentComponent = files(path).default;
  // 解构组件export default 到处的对象中添加的属性
  let { meta, name, redirect } = currentComponent;
  // console.log(currentComponent.meta);
  // console.log(currentComponent.name);

  // 在赋值之前获取.vue组件，后再处理path = ...
  path = path.substring(1).replace(regExp, "");
  // console.log(path);

  return {
    path: path ? path : "/pages",
    // 以后有可能会加入： 重定向，name属性 、， meta路由元信息（一般会从组件里来）
    meta: meta ?? {},
    name: name ?? path.substring(1).split("/").join("-").toLowerCase(), //对组件名字的处理
    redirect: redirect ?? null,
    component: () => import("@/pages" + path),
  };
});

// console.log(repeatRoutes);

function convertTree(repeatRoutes) {
  repeatRoutes = [...repeatRoutes]; //浅拷贝
  // console.log([...repeatRoutes]);
  let treeRoutes = [];
  repeatRoutes.forEach((route) => {
    let routePathArr = route.path.substring(1).split("/");
    // console.log(routePathArr);
    // length为1的都是根节点
    // 需要添加id和pid
    route.id = routePathArr.join("-");
    if (routePathArr.length > 1) {
      let pathArr = [...routePathArr];
      pathArr.pop();
      let pid = pathArr.join("-");
      route.pid = pid; //添加父节点id
    }
  });

  //转换成树形数据
  repeatRoutes.forEach((route) => {
    // 最终：将所有路径都变成小写，为了和菜单高亮效果绑定
    route.path = route.path.toLowerCase();
    //遍历到404时,进行额外处理
    if (route.path === "/page404") {
      route.path = "*";
    }
    // 爸爸在哪
    let parent = repeatRoutes.find((v) => route.pid === v.id);
    if (parent) {
      if (!parent.children) {
        parent.children = [];
      }
      route.path = route.path.substring(1).split("/").pop();
      // console.log(route.path);
      parent.children.push(route);
      // console.log(parent.children);
    } else {
      treeRoutes.push(route);
    }
  });
  return treeRoutes;
}

let res = convertTree(repeatRoutes);
// console.log(res);
//如果想要创建动态路由，则会直接在组件中创建‘_id.vue’ 这就是个动态路由，在nuxt上也是这样的

// 浅拷贝导出
export default [...res];
